<template>
  <view class="index" id="teacher">
    <view class="header-img">
      <!-- 宝宝信息 -->
      <view class="baby-info">
        <!-- 头像+名称+年龄 -->
        <view class="baby">
          <u-image
            width="153rpx"
            height="153rpx"
            :class="['image']"
            :lazy-load="true"
            :src="vuex_userInfo.avatar"
            shape="circle"
            @click="preImg"
          >
            <u-loading slot="loading"></u-loading>
          </u-image>

          <view class="baby-i">
            <view class="baby-name">{{ vuex_userInfo.name }}</view>
            <view>
              <image
                style="width: 24rpx; height: 24rpx; margin-right: 5rpx"
                src="@/static/children/children.png"
                shape="circle"
              ></image>
              <view>{{ schoolName }}</view>
            </view>
          </view>
        </view>
        <view class="report">
          <view>
            <u-button
              :custom-style="customStyle"
              shape="circle"
              @click="layout = true"
              >退出登录</u-button
            >
          </view>
        </view>
      </view>
      <!-- 个人信息 -->
      <view class="user-info">
        <view>个人信息</view>
        <view
          class="info-list"
          v-for="(item, index) in infoList"
          :key="index"
          @click="operate(item, index)"
        >
          <view>{{ item.label }} </view>
          <view @click="changeInfo(item, index)">
            <view v-if="!item.tag">{{ item.value }}</view>
            <u-tag v-else :text="checkTitle" mode="dark" :type="type" />
            <image
              src="@/static/index/right.png"
              style="width: 10.6rpx; height: 20rpx; margin-left: 20rpx"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 修改学校 -->
    <u-select
      v-model="schoolShow"
      label-name="name"
      value-name="school_id"
      :list="schoolList"
    ></u-select>

    <u-modal
      v-model="layout"
      content="是否退出登录?"
      confirm-text="退出"
      :show-cancel-button="true"
      @confirm="loginout"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      layout: false,
      schoolShow: false,
      checkTitle: "", //审核老师提示
      schoolName: "", //校园名称
      type: "info", //主题
      checkList: [], //审核老师list
      historyList: [], //历史审核list
      schoolList: [], //学校list
      infoList: [
        // {
        //   label: "姓名",
        //   value: "王小王",
        //   tag: false,
        // },
        // {
        //   label: "性别",
        //   value: "男",
        //   tag: false,
        // },
        // {
        //   label: "电话号码",
        //   value: "15442587569",
        //   tag: false,
        // },
        // {
        //   label: "学校",
        //   value: "环球幼儿园",
        //   tag: false,
        // },
        // {
        //   label: "审核老师",
        //   value: "暂无审核",
        //   tag: true,
        // },
      ],
      customStyle: {
        color: "#0ACC94",
        borderRadius: "20rpx",
        height: "68rpx",
      },
    };
  },
  created() {
    // 区分校长 跟老师
    if (this.vuex_userInfo.type === 3) {
      this.getCheckList().then(() => {
        return this.teacherInit();
      });
    } else if (this.vuex_userInfo.type === 2) {
      this.init();
    }
  },
  methods: {
    /**
     * 校长信息初始化
     */
    teacherInit() {
      this.infoList = [
        {
          label: "姓名",
          value: this.vuex_principal.name,
          tag: false,
        },
        {
          label: "性别",
          value: this.vuex_principal.sex == 1 ? "男" : "女",
          tag: false,
        },
        {
          label: "电话号码",
          value: this.vuex_principal.phone,
          tag: false,
        },
        {
          label: "学校",
          value: this.vuex_principal.school_name,
          tag: false,
        },
        {
          label: "审核老师",
          value: "暂无审核",
          tag: true,
        },
      ];
      this.schoolName = this.vuex_principal.school_name;
    },

    /**
     * 老师初始化
     */

    init() {
      this.infoList = [
        {
          label: "姓名",
          value: this.vuex_teacher.name,
          tag: false,
        },
        {
          label: "性别",
          value: this.vuex_teacher.sex == 1 ? "男" : "女",
          tag: false,
        },
        {
          label: "电话号码",
          value: this.vuex_teacher.phone,
          tag: false,
        },
        {
          label: "学校",
          value: this.vuex_teacher.school_name,
          tag: false,
        },
        {
          label: "班级",
          value: this.vuex_teacher.class_name,
          tag: false,
        },
      ];
      this.schoolName = this.vuex_teacher.school_name;
    },
    /**
     * 获取审核list
     */
    getCheckList() {
      return new Promise((resolve) => {
        var form = {
          school_id: this.vuex_principal.school_id,
          id: this.vuex_principal.id,
        };
        this.$u.api.getTeacherCheckListApi(form).then((res) => {
          this.checkList = res.data.check_list;
          this.historyList = res.data.history_list.reverse();

          var form = {
            checkList: this.checkList,
            historyList: this.historyList,
          };
          //村缓存
          this.$u.vuex("vuex_checkList", form);

          if (this.checkList.length > 0) {
            this.checkTitle = "待审核(" + this.checkList.length + ")";
            this.type = "error";
          } else {
            this.checkTitle = "暂无审核";
          }
          resolve();
        });
      });
    },

    /**
     * 放大头像
     */
    preImg() {
      uni.previewImage({
        urls: [this.vuex_userInfo.avatar],
      });
    },
    /**
     * 修改信息
     */
    changeInfo(Info, index) {
      // 代表是校长
      if (this.vuex_principal.type === 3) {
        //换学校
        if (index === 3) {
          this.changeSchool();
        } else if (index === 4) {
          uni.navigateTo({
            url: "/pages/teacher/checkList",
          });
        }
      } else {
        console.log("老师");
      }
    },

    /**
     * 更换学校
     */
    changeSchool() {
      this.$u.api.schoolListApi().then((res) => {
        this.schoolList = res.data;
        this.schoolShow = true;
      });
    },

    /**
     * 退出登录
     */
    loginout() {
      this.$u.vuex("vuex_babyInfo", {});
      this.$u.vuex("vuex_userInfo", {});
      this.$u.vuex("vuex_healthItem", []);
      this.$u.vuex("vuex_principal", {});
      uni.reLaunch({
        url: "/pages/regist/register",
      });
    },

    /**
     * 操作
     */
    operate(Info, index) {
      if (index === 2) {
        uni.navigateTo({
          url: "/pages/bindPhone/newPhone",
        });
      }
    },
  },
};
</script>

<style scoped lang ='scss' >
.index {
  background-color: #f7f7f7;
  min-height: 93vh;
  .header-img {
    background-image: url("@/static/index/header.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 50rpx 20rpx;
    height: auto;
    .baby-info {
      height: 220rpx;
      background-color: #ffffff;
      border-radius: 36rpx;
      padding: 18 * 2rpx 15.5 * 2rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 50rpx;
      box-shadow: 5rpx 7rpx 8rpx 0rpx #dcdfe6;

      .baby {
        display: flex;
        flex-direction: row;
        align-items: center;
        .image {
          box-shadow: 3px 3px 10px 1px #e0c4cc;
          border-radius: 50%;
        }
        .baby-i {
          display: flex;
          flex-direction: column;
          margin-left: 30rpx;
          .baby-name {
            color: #000000;
            font-size: 36rpx;
            font-weight: bold;
            margin-bottom: 10rpx;
          }
          & > view:nth-child(2),
          & > view:nth-child(3) {
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #000000;
            font-size: 24rpx;
            margin-top: 5rpx;
            margin-bottom: 5rpx;
          }
        }
      }
      .report {
        text-align: center;
        & > view:nth-child(1) {
          width: 180rpx;
        }
        & > view:nth-child(2) {
          margin-top: 5rpx;
          color: #999999;
          font-size: 20rpx;
        }
      }
    }
    .baby-list {
      background-color: green;
      border-radius: 36rpx;
      padding: 20rpx;
      margin: 0 40rpx 30rpx 40rpx;
      display: flex;
      font-size: 28rpx;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      background-image: linear-gradient(to right, #07c38f, #65b69f);
    }
    .user-info {
      padding: 20rpx;
      background-color: #ffffff;
      margin-top: 20rpx;
      border-radius: 20rpx;
      box-shadow: 5rpx 7rpx 8rpx 0rpx #dcdfe6;

      & > view:nth-child(1) {
        color: #404040;
        font-size: 32rpx;
        font-weight: Bold;
        margin: 20rpx 0;
      }
      .info-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 27rpx 0;
        border-bottom: 1rpx solid #e6e6e6;
        & > view:nth-child(1) {
          color: #666666;
          font-size: 28rpx;
          font-weight: Regular;
        }
        & > view:nth-child(2) {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          color: #333333;
          font-weight: Regular;
          font-size: 28rpx;
        }
      }

      & > view:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>
